import React, { Component } from 'react'
import { View, Text, TouchableOpacity, Platform } from 'react-native'
import { Actions } from 'react-native-router-flux'
import Iconfont from '../iconfont'
import commonStyle from '../../libs/commonStyle'
export default class HeaderWhite extends Component {
	_onBack() {
		Actions.pop()
	}
	render() {
		const { title, hasLeft, buttonText, rightHandle, isDisabled } = this.props
		return (
			<View
				style={[
					commonStyle.backgroundColorWhite,
					commonStyle.flexRow,
					commonStyle.flexVerticalCenter,
					commonStyle.h100,
					commonStyle.borderBottom,
					Platform.OS === 'ios' ? commonStyle.mt30 : ''
				]}
			>
				<TouchableOpacity
					activeOpacity={1}
					onPress={this._onBack}
					style={[
						commonStyle.w100,
						commonStyle.h100,
						commonStyle.flexCenter,
						{
							position: 'absolute',
							left: 0,
							top: 0,
							zIndex: 999
						}
					]}
				>
					<Iconfont
						name="left_line"
						style={[commonStyle.f40, commonStyle.colorBlackLight]}
					/>
				</TouchableOpacity>
				<View style={[commonStyle.flexItem, commonStyle.flexCenter]}>
					<Text style={[commonStyle.f36, { color: '#000' }]}>
						{title}
					</Text>
				</View>
				{buttonText && (
					<TouchableOpacity
						style={[
							commonStyle.w100,
							commonStyle.mr20,
							commonStyle.border,
							commonStyle.circle10,
							!isDisabled?commonStyle.activeBorderColor: ''
						]}
						activeOpacity={1}
						onPress={() => {
							!isDisabled && rightHandle && rightHandle()
						}}
					>
						<Text
							style={[
								commonStyle.w100,
								commonStyle.textCenter,
								commonStyle.p10,
								!isDisabled?commonStyle.activeColor: commonStyle.colorTips
							]}
						>
							{buttonText}
						</Text>
					</TouchableOpacity>
				)}
			</View>
		)
	}
}
